<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <style type="text/css" rel="stylesheet">
        /*为了防止导航条覆盖页面的其他内容*/
        body{
            padding-top: 50px !important;
        }

    </style>
</head>
<body>
<!--nav可以包含 container的。包含一个容器而已-->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">

          <!--navbar的头部 看看就知道了-->
          <div class="navbar-header">
              <button class="navbar-toggle " type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                      <!--data-target:这个需要和后面的div中的id相关联 这样才会有折叠效果，
                      这里比id多了一个#！！！！-->
              <!--这里是化三条线-->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">
                  <!--可以使用img 作为标签-->
                  <img src="../img/github.png" style="width:20px;height: 20px;" alt="github">
              </a>
          </div>
            <!--collapse navbar-collapse主要是为了当尺寸小的时候，隐藏用的，-->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">link</a></li>
                <li class="dropdown">
                    <!--这里用a标签 button化，不能使用button按钮，太突兀了-->
                    <a role="button" class=" dropdown-toggle" data-toggle="dropdown">
                        dropdown
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">header</li>
                        <li><a href="#">12</a></li>
                        <li><a href="#">12</a></li>
                        <li><a href="#">12</a></li>
                    </ul>
                </li>
            </ul>

              <p class="navbar-text">please input key</p>
              <!--form表单 这两个类都要写-->
              <form action="#" class="navbar-form navbar-left" role="search">
                  <div class="form-group">
                      <input type="text" class="form-control" placeholder="search……">
                  </div>
                <button type="submit" class="btn btn-default">sumbit</button>
              </form>

              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">right</a></li>
                  <li class="dropdown">
                      <a role="button" data-toggle="dropdown" type="button" class="dropdown-toggle ">
                          dropdown
                          <span class="caret"></span>
                      </a>
                      <ul class="dropdown-menu">
                          <li><a href="#">1</a></li>
                          <li><a href="#">1</a></li>
                          <li><a href="#">1</a></li>
                          <li><a href="#">1</a></li>
                      </ul>
                  </li>
              </ul>
            <!--  &lt;!&ndash;带层次的导航结构&ndash;&gt;
              <ol class="breadcrumb">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Library</a></li>
                  <li class="active">Data</li>
              </ol>-->
          </div>

  </div>

</nav>
<div>12</div>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<script type="text/javascript"src="bootstrap/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>